<template>
  <el-dialog :visible.sync="dialogInfo.show" :show-close="false" :close-on-click-modal="false" :width="form.formInfo.formWidth + '%'" top="0vh" append-to-body>
    <div :style="{'text-align': 'right'}" class="action-bar">
      <div style="float:left; horiz-align: center; text-align:center;">
        <el-input v-if="form.busPageInfo.editable" v-model="form.busMainData.applyName" size="mini" maxlength="100" style="width:300px;" placeholder="请输入申请名" />
        <span v-else>{{ form.busMainData.applyName }}</span>
      </div>
      <span v-loading="loading" v-if="form.busPageInfo.editable" class="bar-btn" @click="saveFormApply">
        <i class="el-icon-edit" />
        暂存
      </span>
      <span v-loading="loading" v-if="form.busPageInfo.editable" class="bar-btn" @click="submitFormApply">
        <i class="el-icon-check" />
        提交
      </span>
      <span class="bar-btn delete-btn" @click="cancel()">
        <i class="el-icon-circle-close" />
        关闭
      </span>
    </div>
    <DynamicLoad
      v-if="form.formContentInfo.id !== ''"
      ref="dynamicLoad"
      :comp-id="form.formContentInfo.id"
      :html-code="form.formContentInfo.formHtml"
      :js-code="form.formContentInfo.formJs"
      :width="form.formInfo.formWidth"
      @afterMounted="formModuleLoad"/>
  </el-dialog>
</template>
<script>
import DynamicLoad from '@/components/DynamicLoader/index'
import { addOrEdit, viewMainData, toAdd, toChange, toCopy } from '@/api/system/formApply'

export default {
  components: { DynamicLoad },
  props: {
    sup_this: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialogInfo: {
        show: false
      },
      form: {
        formSubmit: false,
        busPageInfo: {
          editable: true
        },
        formInfo: {
          width: 0
        },
        formContentInfo: {
          formHtml: '',
          formJs: '',
          id: ''
        },
        busMainData: {
          applyName: '',
          id: ''
        },
        formData: {}, // 表单值对象
        formDataEditable: {}, // 表单控件编辑权限控制
        formDataVisible: {} // 表单控件可见权限控制
      },
      loading: false
    }
  },
  watch: {},
  created() {},
  mounted() {
    window.addEventListener('keydown', this.preventDefaultSave)
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.preventDefaultSave)
  },
  methods: {
    preventDefaultSave(e) {
      if (e.key === 's' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
      }
    },
    displayDialog() {
      setTimeout(() => {
        this.dialogInfo.show = true
        /* const { name } = this.dialogInfo
        this.$nextTick(() => {
          this.$modal.show(name)
        })*/
      }, 100)
    },
    hiddenDialog() {
      this.dialogInfo.show = false
      /* const { name } = this.dialogInfo
      this.$nextTick(() => {
        this.$modal.hide(name)
      })*/
    },
    cancel() {
      this.hiddenDialog()
      this.form.formContentInfo.id = ''
    },
    initDataOfBefore() {
      this.form.formContentInfo.id = ''
    },
    formModuleLoad() {
      const _this = this
      if (this.form.formContentInfo.id) {
        const _thisForm = _this.getForm()
        for (const formKey in _this.form.formData) {
          _thisForm.formData[formKey] = _this.form.formData[formKey]
        }
        for (const formKey in _this.form.formDataEditable) {
          const tmpEdit = _this.form.formDataEditable[formKey]
          _thisForm.formDataEditable[formKey] = tmpEdit
          if (!tmpEdit && _thisForm.rules) {
            _thisForm.rules[formKey] = null
          }
        }
        for (const formKey in _this.form.formDataVisible) {
          _thisForm.formDataVisible[formKey] = _this.form.formDataVisible[formKey]
        }
      }
    },
    viewMainData(mainId) {
      const data = { paramBean: { id: mainId }}
      viewMainData(data).then(res => {
        this.displayDialog()
        this.form = res.data
      })
    },
    addData(formId) {
      const data = { paramBean: { formId: formId }}
      toAdd(data).then(res => {
        this.displayDialog()
        this.form = res.data
      }).catch(err => {
        this.hiddenDialog()
        console.log(err)
      })
    },
    copyData(mainId) {
      const data = { paramBean: { id: mainId }}
      toCopy(data).then(res => {
        this.displayDialog()
        this.form = res.data
      }).catch(err => {
        this.hiddenDialog()
        console.log(err)
      })
    },
    changeData(busId) {
      const data = { paramBean: { id: busId }}
      toChange(data).then(res => {
        this.displayDialog()
        this.form = res.data
      }).catch(err => {
        this.hiddenDialog()
        console.log(err)
      })
    },
    saveFormApply() {
      this.doSingleSave(false)
    },
    submitFormApply() {
      this.doSingleSave(true)
    },
    getForm() {
      const _this = this
      const _thisForm = _this.$refs.dynamicLoad.$children[0]
      return _thisForm
    },
    doSingleSave(isSubmit) {
      const _this = this
      if (!_this.form.busMainData.applyName) {
        this.$message({
          message: '请输入标题',
          type: 'warning'
        })
        return
      }
      const _thisForm = this.getForm()
      _thisForm.$refs['elForm'].validate((valid) => {
        if (valid) {
          _this.form.formData = _thisForm['formData']
          _this.form.formSubmit = isSubmit
          _this.loading = true
          _this.doAdd()
        }
      })
    },
    doAdd() {
      addOrEdit(this.form).then(res => {
        this.loading = false
        this.sup_this.init()
        this.cancel()
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
@include action-bar;
::v-deep .el-dialog__header {
  display: none;
}
::v-deep .el-dialog__body {
  padding: 10px 10px;
}
</style>
